<template>
  <div class="flow">
    <!--查询区域-->
    <div class="jeecg-basic-table-form-container">
      <a-form
        ref="formRef"
        @keyup.enter.native="searchQuery"
        :model="queryParam"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        style="background-color: #f7f8fc !important"
      >
        <a-row :gutter="24">
          <a-col :lg="6">
            <a-form-item name="name" label="流程名称">
              <a-input v-model:value="queryParam.name" placeholder="请输入流程名称" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :lg="6">
                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
              </a-col>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-row :span="24" class="flow-row">
      <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
        <a-card class="flow-add-card" @click="openAdd()">
          <div class="flex">
            <span
              data-v-d3585fb7=""
              class="flow-card-add-icon app-iconify anticon flow-card-add-icon"
              style="font-size: 20px; display: inline-flex"
            ></span>
            <span class="flow-card-add-title">添加流程</span>
          </div>
        </a-card>
      </a-col>
      <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24" v-for="item in flowList" v-if="flowList && flowList.length > 0">
        <a-card class="flow-card" @click="openAddEdit(item)">
          <div class="flow-header">
            <div class="flex">
              <img :src="getImage(item.icon)" class="header-icon" />
              <div class="header-text">
                <span class="header-name">{{ item.name }}</span>
                <span class="header-text-top header-create-by">
                  {{ item.createTime }}
                </span>
              </div>
            </div>
          </div>
          <div class="text-desc" style="margin-top: 5px">{{ item.descr }}</div>
          <div class="flex text-status">
            <span class="tag-input">输入</span>
            <div>
              <span class="ant-tag"><span class="tag-text">content</span> </span>
            </div>
            <div>
              <span class="ant-tag">
                <span class="tag-text">history</span>
              </span>
            </div>
          </div>

          <div class="model-btn">
            <a-button class="model-icon" size="small" @click.prevent.stop="openAddEdit(item)">
              <icon-font iconClass="icon-opt-bianji" font-size="24px" title="编辑" color="#60666b"></icon-font>
            </a-button>
            <a-dropdown placement="bottomRight" :trigger="['click']" :getPopupContainer="node => node.parentNode">
              <div class="ant-dropdown-link pointer model-icon" @click.prevent.stop>...</div>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="delete" @click.prevent.stop="handleDeleteClick(item)">
                    <icon-font
                      iconClass="icon-opt-shanchu"
                      font-size="24px"
                      title="删除"
                      color="#60666b"
                      @click="remove(record)"
                    ></icon-font>
                    删除
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <Pagination
      v-if="flowList.length > 0"
      :current="pageNo"
      :page-size="pageSize"
      :page-size-options="pageSizeOptions"
      :total="total"
      :showQuickJumper="true"
      :showSizeChanger="true"
      @change="handlePageChange"
      class="list-footer"
      size="small"
    />
    <FlowAddEdit v-model:visible="showEdit" v-if="showEdit" :data="current" @done="reload" />
    <FlowAddEditInfo v-model:visible="showEditInfo" v-if="showEditInfo" :isUpdate="isUpdateInfo" :data="current" @done="done" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Modal, Pagination, message } from 'ant-design-vue';

import { FlowApi } from '@/views/super/airag/aiflow/api/FlowApi';
import FlowAddEdit from './components/flow-add-edit.vue';
import FlowAddEditInfo from './components/flow-add-edit-info.vue';

import { API_BASE_PREFIX } from '@/config/setting';
import { getToken } from '@/utils/token-util';
import defaultImg from './img/ailogo.png';
/**
 * 创建应用的集合
 */
const flowList = ref([]);
//当前页数
const pageNo = ref(1);
//每页条数
const pageSize = ref(10);
//总条数
const total = ref(0);
//可选择的页数
const pageSizeOptions = ref(['10', '20', '30']);

//查询参数
const queryParam = reactive({});
//查询区域label宽度
const labelCol = reactive({
  xs: 24,
  sm: 4,
  xl: 6,
  xxl: 6
});
//查询区域组件宽度
const wrapperCol = reactive({
  xs: 24,
  sm: 20
});
//表单的ref
const formRef = ref();
const showEdit = ref(false);
const showEditInfo = ref(false);
const isUpdateInfo = ref(false);

// 图标上传预览地址
const icon = reactive({
  filePreviewUrl: `${API_BASE_PREFIX}/sysFileInfo/public/preview?fileId=`,
  // 上传文件时候要带header
  headers: {
    Authorization: getToken()
  }
});

/**
 * 获取图片
 * @param fileId
 */
function getImage(fileId) {
  return fileId ? icon.filePreviewUrl + fileId : defaultImg;
}

// 当前行数据
const current = ref(null);
/**
 * 加载数据
 */
const reload = () => {
  let params = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    column: 'createTime',
    order: 'desc'
  };
  Object.assign(params, queryParam);
  FlowApi.list(params).then(res => {
    if (res.success) {
      flowList.value = res.data.records;
      total.value = res.data.total;
    } else {
      flowList.value = [];
      total.value = 0;
    }
  });
};
const done = value => {
  if (value === 'ok') {
    showEditInfo.value = false;
    showEdit.value = true;
  }
};
/**
 * 查询
 */
function searchQuery() {
  reload();
}

/**
 * 重置
 */
function searchReset() {
  formRef.value.resetFields();
  queryParam.createBy = '';
  //刷新数据
  reload();
}
onMounted(async () => {
  reload();
});

// 新增编辑点击
const openAddEdit = record => {
  current.value = record;
  showEdit.value = true;
  isUpdateInfo.value = true;
};
const openAdd = record => {
  current.value = {
    name: '',
    descr: '',
    icon: '',
    design:
      '{"nodes":[{"id":"start-node","type":"start","x":300,"y":250,"properties":{"text":"开始","remarks":"","options":{},"inputParams":[{"field":"content","name":"用户问题","type":"string","required":true},{"field":"history","name":"历史记录","type":"string[]","required":true}],"outputParams":[],"height":62,"width":332}}]}'
  };
  isUpdateInfo.value = false;
  showEditInfo.value = true;
};
const handleDeleteClick = record => {
  Modal.confirm({
    title: '删除流程',
    content: `是否确认删除流程【${record.name}】?`,
    okText: '确认',
    cancelText: '取消',
    onOk() {
      FlowApi.delete({ id: record.id }).then(res => {
        if (res.success) {
          reload();
          message.success('删除成功');
        } else {
          message.error(res.message);
        }
      });
    }
  });
};
function handlePageChange(page, current) {
  pageNo.value = page;
  pageSize.value = current;
  reload();
}
</script>

<style scoped lang="less">
.flow {
  height: calc(100vh - 115px);
  background: #f7f8fc;
  padding: 24px;
  overflow-y: auto;

  .flow-row {
    max-height: calc(100% - 100px);
    margin-top: 20px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .flow-card {
    margin-right: 20px;
    margin-bottom: 20px;
    background: #fcfcfd;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 4px #e6e6e6;
    transition: all 0.3s ease;
    border-radius: 10px;
    height: 152px;
  }

  .flow-card .flow-header {
    position: relative;
  }

  .flow-card .flow-header .header-icon {
    margin-right: 4px;
    margin-top: -2px;
    width: 28px;
    height: 28px;
    border-radius: 4px;
  }

  .flow-card .flow-header .header-text {
    margin-left: 5px;
    font-size: 14px;
    font-weight: 700;
    color: #354052;
    width: calc(100% - 80px);
    overflow: hidden;
    align-content: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: grid;
  }

  .flow-card .flow-header .header-create-by {
    margin-top: 5px;
    font-size: 12px;
    color: #646a73;
    font-weight: 500;
  }

  .flow-card .text-desc {
    width: 100%;
    font-weight: 400;
    display: inline-block;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 40px;
    overflow: hidden;
    font-size: 12px;
    color: #676f83;
  }

  .flow-card .text-status {
    margin-top: 8px;
    font-size: 12px;
    color: #676f83;
  }

  .flow-card .text-status .more {
    width: 30px;
    color: #383e4f;
    text-align: center;
    position: relative;
    top: -2px;
  }

  .flow-card:hover .flow-btn {
    display: block;
  }
}

.flow .flow-add-card {
  margin-bottom: 20px;
  background: #fcfcfd;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 4px #e6e6e6;
  transition: all 0.3s ease;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
  height: 152px;
  width: calc(100% - 20px);
}

.flow .flow-add-card .flow-card-add-title {
  font-size: 16px;
  color: #1f2329;
  font-weight: 400;
  align-self: center;
}

.flow .flow-add-card .flow-card-add-icon {
  padding: 8px;
  color: #1f2329;
  background-color: #f5f6f7;
  margin-right: 12px;
}

.flow-add-card:hover,
.flow-card:hover {
  box-shadow: 0 6px 12px #d0d3d8;
}

.flex {
  display: flex;
  align-items: center;
}

.label {
  font-weight: 400;
  font-size: 12px;
  align-self: center;
  color: #8a8f98;
  overflow-wrap: break-word;
}
.described {
  font-weight: 400;
  margin-left: 14px;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 12px;
}

.flex {
  display: flex;
}

:deep(.ant-card .ant-card-body) {
  padding: 16px;
}

.mr-14 {
  margin-right: 14px;
}
.mt-6 {
  margin-top: 6px;
}

.ml-4 {
  margin-left: 4px;
}

.model-btn {
  position: absolute;
  right: 4px;
  top: 6px;
  height: auto;
  display: none;
}

.flow-card :hover {
  .model-btn {
    display: flex;
  }
}
.pointer {
  cursor: pointer;
}
.list-footer {
  text-align: right;
  margin-top: 5px;
}
.jeecg-basic-table-form-container {
  padding: 0;
  :deep(.ant-form) {
    background-color: transparent;
  }
  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }
}

.add-knowledge-card {
  margin-bottom: 20px;
  background: #fcfcfd;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
  height: 152px;
  width: calc(100% - 20px);
  .add-knowledge-card-icon {
    padding: 8px;
    color: #1f2329;
    background-color: #f5f6f7;
    margin-right: 12px;
  }
  .add-knowledge-card-title {
    font-size: 16px;
    color: #1f2329;
    font-weight: 400;
    align-self: center;
  }
}

.add-knowledge-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.model-icon {
  background-color: unset;
  border: none;
  margin-right: 2px;
}
.model-icon:hover {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
}
.ant-dropdown-link {
  font-size: 14px;
  height: 24px;
  padding: 0 7px;
  border-radius: 4px;
  align-content: center;
  text-align: center;
}
</style>
